<template>
<!-- 底部导航 已弃用 -->
    <div>
        <div class="nav_wrap">
            <ul>
                <li v-for="(item,index) in navList" :key="index" @click="active=index">
                    <router-link :to="{name:item.name}">
                        <img :src="active==index?item.active:item.normal" alt="">
                    </router-link>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name:'navs',
    data() {
        return {
            active:0,
            navList: [
                {
                name: "home",
                title: "首页",
                normal:
                    "https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/81741/30/12345/4140/5d9c4b13E726f0a1e/82c582e7c375e4b3.png", //普通图标
                active:
                    "https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/67550/26/12426/5094/5d9c4b13Eea435a3f/81328b0609c60a3c.png" //激活图标
                },
                {
                name: "category",
                title: "分类",
                normal:
                    "https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/56507/6/12787/3168/5d9c4b12Ef363dd8d/4af32f42575509d8.png",
                active:
                    "https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/48787/24/12910/3390/5d9c4b12Ee63270e4/4481f5b3dbad979d.png"
                },
                {
                name: "suprise",
                title: "惊喜",
                normal:
                    "https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/70651/38/12417/3194/5d9d3eafE12cde68b/2467c20113c50451.png",
                active:
                    "https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/70651/38/12417/3194/5d9d3eafE12cde68b/2467c20113c50451.png"
                },
                {
                name: "cart",
                title: "购物车",
                normal:
                    "https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/64954/4/12406/3529/5d9c4b12Ee7a82735/f2fe0a88bf344736.png",
                active:
                    "https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/45205/32/12889/3890/5d9c4b12E7bc2c425/dd60fafbde8542ca.png"
                },
                {
                name: "my",
                title: "我的",
                normal:
                    "https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/56206/13/12652/2957/5d9c4b13E503bcd76/1c8543653685e80e.png",
                active:
                    "https://img11.360buyimg.com/jdphoto/s130x100_jfs/t1/47480/36/12929/3209/5d9c4b13E97caa63a/4dc0ec8a7e47c2b7.png"
                }
            ]
        }
    },
}
</script>

<style scoped>
.nav_wrap {
  width: 100%;
  height: 85px;
  background: white;
  position: fixed;
  bottom: 0;
  left: 0;
}
.nav_wrap ul {
  width: 100%;
  height: 92px;
  display: flex;
  justify-content: space-around;
}
.nav_wrap ul li {
  width: 120px;
  height: 92px;
}
.nav_wrap ul img {
  width: 120px;
  height: 92px;
}
</style>